<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>添加发票</title>
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/until.css">
    <link rel="stylesheet" href="../css/addInvoice.css">
  </head>

  <body>
    <div class="wrapper">
      <header class="header border-bottom-1px">
        <ul>
          <li class="tab" onclick="tabChange('company')">
            <label>
                        <input type="radio" name="type" class="input-none" value="company" checked="checked"/>
                        <i class="is-check"></i>公司发票
                    </label>
          </li>
          <li class="tab" onclick="tabChange('person')">
            <label><input type="radio" name="type" class="input-none" value="person"/><i class="is-check"></i>个人发票</label>
          </li>
        </ul>
      </header>
      <div class="tab-content">
        <section class="company">
          <ul>
            <li class="item border-bottom-1px">
              <span>抬头</span>
              <input type="text" />
            </li>
            <li class="item border-bottom-1px">
              <span>联系电话</span>
              <input type="text" />
            </li>
            <li class="item border-bottom-1px">
              <span>税号</span>
              <input type="text" />
            </li>
            <li class="item border-bottom-1px">
              <span>开户行</span>
              <input type="text" value="中国银行" />
            </li>
            <li class="item border-bottom-1px">
              <span>账号</span>
              <input type="text" />
            </li>
            <li class="item border-bottom-1px">
              <span>设为默认</span>
              <input type="checkbox" name="default" class="input-none" />
              <i class="is-check"></i>
            </li>
            <li class="item">
              <span>营业执照</span>
              <input type="file" capture="camera" accept="image/*" class="input-none" />
              <i class="add-file">+</i>
            </li>

          </ul>
        </section>
        <section class="person hide">
          <ul>
            <li class="item border-bottom-1px">
              <span>抬头</span>
              <input type="text" value="艾安琪" />
            </li>
            <li class="item border-bottom-1px">
              <span>设置默认</span>
              <input type="checkbox" name="default" class="input-none" />
              <i class="is-check"></i>
            </li>
          </ul>
        </section>
      </div>
      <footer>
        <div class="btn-sub">保存</div>
      </footer>
    </div>

    <script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
    <script>
      function tabChange(name) {
        $('.tab-content>section').addClass('hide');
        $(`.${name}`).removeClass('hide');
      }
    </script>
  </body>

</html>